<template>
  <div class="detail-box">
    <el-dialog
        v-model="editDialogVisible"
        title="修改申请"
        width="40vw"
        :before-close="handleClose"
        :close-on-click-modal="false"
    >
      <el-form
          ref="ruleFormRef"
          style="max-width: 100%"
          :model="seal_form"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
      >
        <el-form-item label="标题" class="el-form-items">
          <el-input v-model="seal_form.title" style="width: 100%" placeholder="填写用印项目"/>
        </el-form-item>
        <el-form-item label="描述" class="el-form-items">
          <el-input v-model="seal_form.content" style="width: 100%" placeholder="填写用印描述"/>
        </el-form-item>
        <el-form-item label="附件" class="el-form-items upload-items" style="height: 8vh">
          <el-upload
              v-model:file-list="seal_form.newFile"
              class="upload-demo"
              :action="resubmitURL"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-change="handleSealFileChange"
              :on-success="handleSealFileSuccess"
              :auto-upload="false"
              style="width: 100%"
          >
            <!--style="    height: 90%;display: flex;flex-direction: column;"-->
            <el-button size="small">点击上传</el-button>
            <div class="el-upload__text" style="font-family: dingding">
              单次仅可上传一个文件
            </div>
          </el-upload>
        </el-form-item>
        <div class="btn-box" style="margin-top: 3vh;">
          <el-button type="primary" @click="onSubmit()">
            提交
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {computeDate, createMsg, getUserInfo, processSealFileJSON} from "@/lib/utils"
import {ElButton, ElCascader, ElDialog, ElForm, ElInput, ElMessage, ElUpload} from "element-plus"
import {resubmitURL} from "@/api/http"
import {ref} from "vue-demi"
import {onMounted, reactive} from "vue"
import {getSealApproveDetails, submitEdit} from "@/api/OA/Seal"
import {getApproveById, resubmit} from "@/api/OA/Approve"

let user_info
const editDialogVisible = ref(false)
const seal_file = ref([])
let seal_form = reactive({
  newFile:[],
})
const emits = defineEmits(['refreshEdit'])
// 章类型 0 公章 1 法人章 2 合同章
const sealOption = [
  {
    value: 0,
    label: '公章',
  },{
    value: 1,
    label: '法人章',
  },{
    value: 2,
    label: '合同章',
  },
]

// 是否外接 0否 1是
const takeOption = [
  {
    value: 0,
    label: '否',
  },{
    value: 1,
    label: '是',
  },
]

let currentFlowId

onMounted(()=>{
  user_info = getUserInfo()
})

const showDetails = async (id) => {
  try {
    currentFlowId = id
    const {data:res} = await getApproveById(id)
    if(res.code === 200){
      seal_form.title = res.data.title
      seal_form.content = res.data.content
      editDialogVisible.value = true
    } else {
      ElMessage({
        message:'获取失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const handleClose = () => {
  currentFlowId = null
  editDialogVisible.value = false
  seal_form.newFile = []
}

const handleExceed = () => {
  createMsg('单次只能上传一个文件','warning')
}

const handleSealFileChange = (file) => {
  // console.log(file.raw,'file.raw')
  seal_file.value.push(file.raw)
}

const handleSealFileSuccess = (file) => {
  console.log(file,'s')
}


const onSubmit = async () => {
  const userConfirm = window.confirm('此操作仅对已填写的内容进行修改，是否提交？')
  if (userConfirm){
    const form = new FormData();
    form.append("userId", user_info.id);
    form.append("approveId", currentFlowId);
    form.append("title", seal_form.title);
    form.append("content", seal_form.content);
    form.append("file",seal_file.value[0])
    const {data:res} = await resubmit(form)
    if (res.code === 200){
      await emits('getEditList')
      handleClose()
      return createMsg('操作成功!','success',true)
    } else {
      handleClose()
      return createMsg('操作失败','info',true)
    }
  }
}

defineExpose({
  showDetails,
})
</script>

<style scoped lang="less">
.detail-box{
  font-family: dingding;
}
</style>
